<script>
// 导入所有内容,然后放在一个叫 echarts 的对象中
// *所有图表类型 , as 相当于起一个别名
import * as echarts from 'echarts'

export default {
  data() {
    return {
      xAxisData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      seriesData: [5, 20, 36, 10, 10, 20],
      seriesType: 'line',
      myChart: null
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById('main'))
    this.initChart()
  },
  methods: {
    initChart() {
      // 绘制图表
      this.myChart.setOption({
        title: {
          text: 'ECharts 图表展示'
        },
        tooltip: {
          axisPointer: {
            type: 'cross'
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {
              type: 'png',
              name: '我的世界'
            }
          }
        },
        xAxis: {
          data: this.xAxisData
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: this.seriesType,
            data: this.seriesData
          }
        ]
      })
    },

    // 修改类型
    changeType(type) {
      this.seriesType = type
      // console.log(this.seriesType)
      // 当数据改变后,但是页面,没有重新渲染,可以使用$forceUpdate()进行强制渲染
      // this.$forceUpdate()
      // 重新进行数据添加
      this.initChart()
    },

    changeData(type) {
      if (type == '10010') {
        //家电数据
        this.xAxisData = ['冰箱', '洗衣机', '电视', '空调', '电脑', '电风扇']
        this.seriesData = [1995, 2000, 809, 11234, 21445, 2210]
      } else if (type == '10086') {
        //水果数据
        this.xAxisData = ['苹果', '香蕉', '橘子', '西瓜', '西梅', '荔枝', '芒果', '草莓']
        this.seriesData = [5, 20, 36, 10, 10, 20, 45, 100]
      }
      // 还要数据发生改变,就要重新初始化
      this.initChart()
    }
  }
}
</script>
<template>
  <div class="container">
    <el-button @click="changeType('line')">折线图</el-button>
    <el-button @click="changeType('bar')">柱状图</el-button>
    <el-button @click="changeType('scatter')">散点图</el-button>
    <el-button @click="changeData('10010')">家电销量</el-button>
    <el-button @click="changeData('10086')">水果销量</el-button>
    <el-button @click="changeType('pie')">饼图</el-button>
    
    <!-- 专门用来展示图表用的 -->
    <main id="main"></main>
  </div>
</template>
<style lang="scss" scoped>
.container {
  background-color: white;
  #main {
    height: 600px;
  }
}
</style>